<template>
  <el-drawer
    :title="t('log.accountLogInfo')"
    :model-value="state.dialogFormVisible"
    size="40%"
    direction="rtl"
    :destroy-on-close="true"
  >
    <template #default>
      <el-descriptions :column="2" :border="true">
        <el-descriptions-item
          :label="t('log.createAccountName')"
          label-align="right"
          :span="2"
        >
          {{ formView.createAccountName }}
        </el-descriptions-item>
        <el-descriptions-item
          :label="t('log.logLevel')"
          label-align="right"
          width="10%"
        >
          <el-tag size="small" v-if="formView.logLevel == 0">
            {{ t("log.logLevelInfo") }}</el-tag
          >
          <el-tag size="small" v-if="formView.logLevel == 1" type="warning">
            {{ t("log.logLevelWarn") }}</el-tag
          >
          <el-tag size="small" v-if="formView.logLevel == 2" type="danger">
            {{ t("log.logLevelError") }}</el-tag
          >
        </el-descriptions-item>
        <el-descriptions-item
          :label="t('log.logAction')"
          label-align="right"
          width="10%"
          >{{ formView.logAction }}
        </el-descriptions-item>
        <el-descriptions-item :label="t('log.createTime')" label-align="right">
          {{ formView.createTime }}
        </el-descriptions-item>
        <el-descriptions-item label="IP" label-align="right" :span="2">
          {{ formView.ipAddress }}
        </el-descriptions-item>
        <el-descriptions-item
          :label="t('log.hostId')"
          label-align="right"
          :span="2"
        >
          {{ formView.hostId }}
        </el-descriptions-item>
        <el-descriptions-item
          :label="t('log.businessKey')"
          label-align="right"
          :span="2"
        >
          {{ formView.businessKey }}
        </el-descriptions-item>
        <el-descriptions-item
          :label="t('log.logInfo')"
          label-align="right"
          :span="2"
        >
          {{ formView.logInfo }}
        </el-descriptions-item>
      </el-descriptions>
    </template>
    <template #footer>
      <!-- <el-button @click="state.dialogFormVisible = false">取消</el-button> -->
      <!-- <el-button @click="handlePrevLog" type="primary">上一条</el-button> -->
      <!-- <el-button @click="handleNextLog" type="primary">下一条</el-button> -->
    </template>
  </el-drawer>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import utils from "../../../../utils/utils";
import apiAccount from "../../api/account";
import { useI18n } from "vue-i18n";
const { t } = useI18n({ useScope: "global" });

const formViewOriginal = () => {
  return {
    accountLogId: "",
    name: "",
    catagory: "",
    logAction: "",
    logLevel: 0,
    logInfo: "",
    businessKey: "",
    hostId: "",
    ipAddress: "",
    createAccountName: "",
    createTime: "",
  };
};

const formView = reactive(formViewOriginal());

const state = reactive({
  dialogFormVisible: false,
  lastLogId: "",
});

const show = (row: any) => {
  // console.log(row);
  Object.assign(formView, formViewOriginal());

  apiAccount
    .getAccountLog(row.accountLogId)
    .then((response: any) => {
      if (response.data.code == 200) {
        Object.assign(formView, response.data.data);
        state.lastLogId = formView.accountLogId;
      }
    })
    .catch((err: any) => {
      utils.errorNotification(t("common.submitException"), err);
    });

  state.dialogFormVisible = true;
};

const handlePrevLog = () => {
  apiAccount
    .getAccountPrevLog(state.lastLogId)
    .then((response: any) => {
      if (response.data.code == 200) {
        // assign 在一起执行，防止闪烁
        Object.assign(formView, formViewOriginal());
        Object.assign(formView, response.data.data);
        state.lastLogId = formView.accountLogId;
      }
    })
    .catch((err: any) => {
      utils.errorNotification(t("common.submitException"), err);
    });
};

const handleNextLog = () => {
  apiAccount
    .getAccountNextLog(state.lastLogId)
    .then((response: any) => {
      if (response.data.code == 200) {
        Object.assign(formView, formViewOriginal());
        Object.assign(formView, response.data.data);
        state.lastLogId = formView.accountLogId;
      }
    })
    .catch((err: any) => {
      utils.errorNotification(t("common.submitException"), err);
    });
};

defineExpose({
  show,
});
</script>
